<template>
  <a-row type="flex" justify="center">
    <a-col :span="16">
      <a-card class="card">
        <!-- 标题 -->
        <a-row type="flex" justify="center">
          <a-col :span="23">
            <a-tabs :default-active-key="0" @change="callback" style="margin-top: -0.9em">
              <a-tab-pane v-for="(tab,index) in tabArr" :key="index" :tab="tab.name">
                <a-row type="flex" justify="space-between">
                  <!-- 轮播图 -->
                  <a-col :span="10" style="height: 100%">
                      <swiper></swiper>
<!--                    <single-swiper v-if="liArr.length > 0" :paginationTitle="liArr">
                        <swiper-slide v-for="(li,index) in liArr" :key="index" style="text-align: center">
                          <img :src="li.thumbUrl" style="height: 15em" class="swiper-lazy" alt=""/>
                        </swiper-slide>
                    </single-swiper>-->
                  </a-col>
                  <!-- 列表 -->
                  <a-col :span="14">
                    <ul>
                      <a-row type="flex"
                             justify="space-between"
                             class="li-row"
                             v-for="(li,index) in liArr"
                             :key="index">
                        <a-col :span="16">
                          <li class="li-title" @click="locationTo('/newsdetail.html',li.newId)">{{ li.title }}</li>
                        </a-col>
                        <a-col style="text-align: right">
                          <span class="li-date">{{ li.createDate }}</span>
                        </a-col>
                      </a-row>
                    </ul>
                  </a-col>
                </a-row>
              </a-tab-pane>
              <div slot="tabBarExtraContent" class="card-title-more" @click="locationTo('/news.html')">
                {{ `${this.more} >` }}
              </div>
            </a-tabs>
          </a-col>
        </a-row>
      </a-card>
    </a-col>
  </a-row>
</template>

<script>

import SingleSwiper from "~/components/swiper/SingleSwiper";
import Swiper from "~/components/swiper";
import {queryNews} from '~/api/home'

export default {
  name: "News",
  data() {
    return {
      tabArr: [
        {name: '通知公告', type: 1},
        {name: '农业政策', type: 3},
        {name: '政策快报', type: 2}
      ],
      newsParam: {
        type: 1,
        count: 6
      },
      liArr: [],
      more: '查看更多'
    }
  },
  components: {
    SingleSwiper,
    Swiper
  },
  mounted() {
      this.queryNews(this.newsParam.type,this.newsParam.count)
      // window.sessionStorage.setItem("newtype", "通知公告");
  },
  methods: {
    queryNews(type, count) {
        queryNews(type, count).then((res) => {
          this.liArr = res.data
        })
    },
    callback(key) {
        if (key === 0) {
          window.sessionStorage.setItem("newtype", JSON.stringify("通知公告"));
        }
        if (key === 1) {
          window.sessionStorage.setItem("newtype", JSON.stringify("三农信息"));
        }
        if (key === 2) {
          window.sessionStorage.setItem("newtype", JSON.stringify("咨询信息"));
        }
        this.queryNews(this.tabArr[key].type, this.newsParam.count)
    },
    locationTo(url,newId) {
      sessionStorage.setItem("newsDetail_id",newId)
      // window.location = localStorage.getItem('contextPrefix') + url
    }
  }
}
</script>

<style lang="scss" scoped>

@import "/assets/styles/base";

.li-title {
  letter-spacing: 0.1em;
  font-weight: 555;
  font-size: 1.06em;
  color: black;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  &:hover {
    cursor: pointer !important;
    color: rgba(5,150,85,1) !important;
  }
}

.li-date {
  font-weight: 490;
  color: gray;
}

.li-row {
  align-items: center;
  height: 2.5em
}
</style>
